<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="/css/bootstrap.min.css"/>
    <title>register</title>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="col-md-4"></div>
        <div class="col-md-4">

            <form action="/user/reg" method="post">

                <div class="form-group">
                    <label for="userName">用户名</label>
                    <input id="userName" type="text" name="userName" class="form-control"/>
                </div>
                <div class="form-group">
                    <label for="password">密 码</label>
                    <input type="password" class="form-control" name="password" id="password"/>
                </div>
                <div class="form-group">
                    <label for="passwordConfirm">确认密码</label>
                    <input type="password" class="form-control" name="password" id="passwordConfirm"/>
                </div>
                <p th:text="${error}"></p>
                <button type="submit" class="btn btn-info">注 册</button>
            </form>

        </div>
        <div class="col-md-4"></div>
    </div>
    <script src="/js/bootstrap.min.js"/>
    <script src="/js/jquery-3.3.1.min.js"/>
    <script type="text/javascript">

        $("form").submit(function (e) {
            var userName = $("#userName").val();
            if (userName.length == 0) {
                alert("请输入用户名");
                return false;
            }

            var pwd = $("#password").val();
            if (pwd.length == 0) {
                alert("请输入密码");
                return false;
            }

            var pwdConfirm = $("#passwordConfirm").val();
            if (pwd != pwdConfirm) {
                alert("密码输入有误");
                return false;
            }
            return true;
        })

    </script>
</div>
</body>
</html>